<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  <div id="cc">{{info}}</div>
  <input type="button" value="修改msg" @click="info='no'">
    <div id="example">
      <p>origina message:{{message}}</p>
      <p>computed message:{{revermessage}}</p>
    </div>
    <p>呼呼呼看看搜地偶死偶所对几军军军或或或或或</p>
    <div id="demo">{{ fullName }}</div>
    <input type="text" v-model="lastname">
    <input type="text" v-model="firstname">
    <input type="text" v-model="fullName">
    <h3 id="myh3" ref="myh3">huhuhu</h3>
    <input type="button" @click="chan()" value="huhu">
  </div>
  
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
        name: 'home',
        data(){
            return {
              msg:'huhuhu',
              info:'ok333333333',
              message:'vuepress',
              lastname:'',
              firstname:''
            }
        },
        //提供依赖注入，子组件使用 inject 接收
        provide(){
           return {
             getmap:this.chan,
             kk:this.info

           }
        },
      components: {
    HelloWorld
  },
     
        computed:{//在computed中，可以定义一些属性，这些属性叫计算属性，本质就是方法
          revermessage(){
            // console.log(this)
            return this.message.split('').reverse().join('')
          },
          'fullName':function(){
            return this.lastname + this.firstname;
          }
        //注：只要计算属性所用到的 任何 data 中的 数据发生变化，就会立即重新计算
        },
        watch:{//使用这个属性，可以监视 data 中指定数据的变化，然后处理watch 中对应的函数
          // fullName(newval,oldval){
          //   console.log('监视到了改变')
          //   console.log(newval,'新的值');
          //   console.log(oldval,'旧的值')
          // }
        //watch 可以监听路由
        },
        methods:{
            show(){
              // console.log('这是执行函数')
              },

            chan () {
              console.log(this)
              console.log(this.$refs.myh3.innerText);
              // this.msg='no';
              // console.log('hello world');
            }
        },


        beforeCreate() { //这是第一个生命周期函数，表示实例完全被创建出来之前，会执行它
          //  console.log(this.msg);
          //  this.show();
          //注意:在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的数据都还没有被初始化
        },
        
        created(){//这是第二个生命周期函数
          //  console.log('这是第二个生命周期函数');
          //  this.show();
           //注意:在 create 生命周期函数执行的时候，data 和 methods 中的数据都已经被初始化好了
        },
         
        beforeMount() {//这是第三个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未 把模板渲染到页面中
        //  var hh= document.getElementById('cc').innerText;
        //  console.log(hh,676767);
        },
      
       mounted(){//这是第四个生命周期函数，表示内存中的模板已经真实的挂在到页面中，用户可以看到渲染好的页面
        //  var h= document.getElementById('cc').innerText='hello world';
        //  console.log(h,555);
        //注意:在 mounted 生命周期函数执行的时候，是实例创建完成的最后一个生命周期函数，
        //当执行mounted ，表示实例已经被完全创建好了。

       },
    mounted(){
          // alert(77777777)
          console.log(this,'22222')
        },

      //运行中的两个事件
      beforeUpdate(){//表示界面没被鞥更新，数据肯定更新了
        // var hh= document.getElementById('cc').innerText;
        //  console.log(hh,676767);
        // console.log('data中的数据：',this.info)
         //得出结论：执行beforeUpdate的时候，页面中显示的数据还是旧的，
         //data 数据是最新的，页面没有和data 保持同步
      },
     
      updated(){
        //  var hh= document.getElementById('cc').innerText;
        //  console.log(hh,676767);
        //  console.log('data中的数据：',this.info);
         // updated执行的时候，data 数据 和 页面 保持同步，都是最新的
      },
     
 
}
</script>
